<template>
  <ContentDetailWrap :title="t('warehouse.edit')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit(formRef)">
        {{ t('action.save') }}
      </BaseButton>
    </template>
    <!--    表单-->
    <el-form :model="form" ref="formRef" label-width="110px" :rules="rules">
      <div class="flex justify-between">
        <div class="w-50%">
          <el-form-item :label="t('modelInfo.model_name')" prop="model_name">
            <el-input
              v-model="form.model_name"
              clearable
              :placeholder="t('modelInfo.model_name')"
            />
          </el-form-item>
          <el-form-item :label="t('modelInfo.firmware_url')" prop="firmware_url">
            <el-input
              v-model="form.firmware_url"
              clearable
              :placeholder="t('modelInfo.firmware_url')"
            />
          </el-form-item>
        </div>
        <div class="w-50%">
          <el-form-item
            :label="t('modelInfo.latest_firmware_version')"
            prop="latest_firmware_version"
          >
            <el-input
              v-model="form.latest_firmware_version"
              clearable
              :placeholder="t('modelInfo.latest_firmware_version')"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContentDetailWrap>
</template>
<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElMessage, FormInstance } from 'element-plus'
import { getInfoApi, saveDataApi } from '@/api/modelInfo'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  model_name: ''
})

const rules = reactive({
  model_name: [{ required: true, message: '请输入矿机型号', trigger: 'blur' }],
  firmware_url: [
    {
      validator: (rule, value, callback) => {
        const { latest_firmware_version } = form.value
        if (latest_firmware_version && !value) {
          callback(new Error('当最新固件版本有值时，固件链接为必填项'))
        } else if (value) {
          const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/
          if (urlRegex.test(value)) {
            callback()
          } else {
            callback(new Error('请输入有效的链接'))
          }
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const params = {
        model_name: form.value.model_name,
        latest_firmware_version: form.value.latest_firmware_version,
        firmware_url: form.value.firmware_url,
        id: parseInt(query.id as string)
      } as unknown as Record<string, any>
      const resp = await saveDataApi(params)
      if (resp.code === 0) {
        ElMessage.success(t('modelInfo.editSucMsg'))
        push('/channelManage/modelManagement')
      }
    }
  })
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getInfoApi(query.id as string)
  form.value = resp.data
}

onMounted(() => {
  getBackShow()
})
</script>
<style lang="less" scoped></style>
